<template>
  <div id="balance">
    <com-head :opacity="0">{{name}}</com-head>
    <!-- 书币余额 -->
    <div class="bookcoin" v-if="status==='1'">
      <div class="img">
        <img src="../assets/image/bookbi.png">
      </div>
      <p>{{balance}}</p>
      <p>我的书币余额</p>
      <com-button class="btn" :click="Recharge">充值</com-button>
    </div>
    <!-- 佣金余额 -->
    <div class="commission" v-if="status==='2'">
      <div class="img">
        <img src="../assets/image/commission.png">
      </div>
      <p>{{commission}}</p>
      <p>我的佣金余额</p>
      <div class="btn">
        <com-button class="box1" :click="putForward">提现</com-button>
        <com-button class="box2" :click="buySome">赚佣金</com-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "balance",
  data() {
    return {
      status: this.$route.query.status,
      name: "",
      balance: "",
      commission: ""
    };
  },

  computed: {},

  created() {
    if (this.status === "1") {
      //书币余额
      this.name = "书币余额";
      this.loading1();
    } else if (this.status === "2") {
      //佣金余额
      this.name = "佣金余额";
      this.loading2();
    }
  },

  mounted() {},

  methods: {
    loading1() {
      this.axios
        .post("user/wallet", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.balance = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loading2() {
      this.axios
        .post("user/commission", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.commission = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    buysome() {},
    putForward() {
      this.$router.push("putForward");
    },
    Recharge() {
      this.$router.push("Recharge");
    }
  }
};
</script>
<style lang='scss' scoped>
#balance {
  text-align: center;
  background-color: #fff;
  .bookcoin {
    margin-top: 186px;
    .img {
      display: inline-block;
      width: 241px;
      height: 194px;
      img {
        width: 100%;
      }
    }
    p:nth-of-type(1) {
      margin-top: 30px;
      font-size: 60px;
      font-family: Didot-Bold;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 78px;
    }
    p:nth-of-type(2) {
      font-size: 28px;
      color: #555;
      line-height: 60px;
    }
    .btn {
      margin-top: 100px;
    }
  }

  .commission {
    margin-top: 160px;
    .img {
      display: inline-block;
      width: 200px;
      height: 245px;
      img {
        width: 100%;
      }
    }
    p:nth-of-type(1) {
      margin-top: 30px;
      font-size: 60px;
      font-family: Didot-Bold;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 78px;
    }
    p:nth-of-type(2) {
      font-size: 28px;
      color: #555;
      line-height: 60px;
    }
    .btn {
      width: 500px;
      margin: 0 auto;
      margin-top: 80px;
      .box1 {
        background-color: #ff7a13;
      }
    }
  }
}
</style>